<script setup lang="ts" name="BetResult">
import API from "@/api";
import { userinfo } from "@/store";
import { colors } from '@/const/color';
import { cloneDeep } from "lodash";
const route = useRoute();
const { t } = useI18n();
const piniaUserinfo: any = userinfo();

const global: any = getCurrentInstance()?.appContext.config.globalProperties;

const props = defineProps({
  actCards: {
    type: Array<any>,
    default: [],
  },
});

const data: any = reactive({});

const { } = toRefs(data);

const compActCards = computed(() => {
  return cloneDeep(props.actCards.map((it: any) => it?.numbers));
});

const cloumColors = computed(() => {
  return [{
    bg: "transparent",
    border: "transparent",
  }, ...colors];
});

const rowColors = computed(() => {
  return [{
    bg: "transparent",
    border: "transparent",
  }, ...cloumColors.value]
});

const activeBet = (position: Array<number>) => {
    const isCoordinateInArray = compActCards.value.some((coordinates: Array<number>) => {
        if(coordinates.length < 2) {
            coordinates.unshift(0)
        }
        return (
            coordinates.length === position.length &&
            coordinates.every((value, index) => value === position[index])
        );
    });
    return isCoordinateInArray;
};

</script>

<template>
  <div class="betResult">
    <div class="betContent">
      <div class="betRow" v-for="(item, index) in rowColors" :key="index">
        <div
          class="betColumn"
          v-for="(it, i) in cloumColors"
          :key="i"
          :class="{
            borderBet: index < i+1,
            medal: index == 1 && i == 0,
            active: activeBet([index-1, i])
          }"
          :style="{
            backgroundColor: (+i == 0 ? item.bg : '') || (+index == 0 ? it.bg : ''),
            borderColor: (+i == 0 ? item.border : '') || (+index == 0 ? it.border : ''),
          }"
        >
          <span v-if="i == 0 && index - 1 > 0">{{ index - 1 }}</span>
          <span v-if="index == 0 && i > 0">{{ i }}</span>
        </div>
      </div>
    </div>
    <div class="tips">
      <img src="@/assets/images/ColorfulLottery/inputMoney.png" alt="" />
      <p>本场选中</p>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import url("./index.scss");
</style>
